<!--region 封装的分页 table-->
<template>
	<div class="table" v-loading="options.loading">
		<el-table
			id="HTable"
			ref="mutipleTable"
			border
			:data="list"
			:stripe="options.stripe"
			:header-cell-style="{background:'#FAFAFA', color: '#8F9BB3'}"
			@selection-change="handleSelectionChange"
			@sort-change="handleChangeTableSort"
		>
			<!--region 选择框-->
			<el-table-column v-if="options.mutiSelect" type="selection" fixed="left" width="55" align="center"></el-table-column>
			<el-table-column v-if="showIndex" type="index" label="#" width="55" align="center"></el-table-column>
			<!--endregion-->

			<!--region 数据列-->
			<template v-for="(column, index) in columns">
				<el-table-column
					header-align="center"
					align="center"
					:prop="column.prop"
					:key="column.label"
					:label="column.label"
					:fixed="column.fixed"
					:min-width="column.width"
					:sortable="column.sortable || false"
					:show-overflow-tooltip="column.tooltip || false"
				>
					<template v-slot="scope">
						<template v-if="column.formatter">
							<span v-html="column.formatter(scope.row, column)"></span>
						</template>

						<template v-else>
							<span>{{scope.row[column.prop]}}</span>
						</template>
					</template>
				</el-table-column>
			</template>
			<!--endregion-->

			<!--region 按钮操作组-->
			<template v-if="operates">
				<el-table-column
					ref="fixedColumn"
					header-align="center"
					align="center"
					:label="operates.label || '操作'"
					:width="operates.width"
					:fixed="operates.fixed"
				>
					<template v-slot="scope">
						<div class="operate-group">
							<template v-for="(btn, key) in operates.list">
								<div class="item" v-if="btn.show" :key="btn.id">
									<el-button
										class="item-btn"
										size="mini"
										:type="btn.type"
										:icon="btn.icon"
										:disabled="btn.disabled"
										:plain="btn.plain"
										@click.native.prevent="btn.method(key, scope.row)"
									>{{ btn.label }}</el-button>
								</div>
							</template>
						</div>
					</template>
				</el-table-column>
			</template>
			<!--endregion-->

			<slot></slot>
		</el-table>
	</div>
</template>

<script>
export default {
  	name: 'HTable',
	props: { // table 表格的控制参数
		showIndex: {
			type: Boolean,
			default: () => true
		},
		list: { // 数据列表
			type: Array,
			default: () => []
		},
		columns: { // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
			type: Array,
			default: () => []
		},
		operates: { // 操作按钮组 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
			type: [Object, Boolean],
			default: () => false
		},
		options: {
			type: Object,
			default: () => {
				return {
					stripe: true,
					loading: false,
					mutiSelect: false,
					highlightCurrentRow: false,
				}
			}
		}
	},
	data() {
		return {
			multipleSelection: [] // 多行选中
		};
	},
	mounted() {},
	destroyed() {},
	methods: {
		// 多行选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			this.$emit("handleSelectionChange", val);
		},
		// 排序
		handleChangeTableSort(obj) {
			let sort = '';
			if (obj.order === "ascending") {
				sort = "+" + obj.prop;
			} else if (obj.order === "descending") {
				sort = "-" + obj.prop;
			} else {
				sort = '';
			}
			this.$emit("handleChangeTableSort", sort);
		},
	},
};
</script>

<style lang="less" scoped>
.item {
	display: inline-block;
	margin-right: 8px;
}
.item:last-child {
	margin-right: 0;
}
</style>
